<template>
	<view>
		<view class="title">问题类型</view>
		<view class="list">
			<view class="item" v-for="(item, index) in guides" :key="index" @click="onGuideDetail(item.tasType)">
				<view class="item-type">
					<text class="icon"></text>
					<text>{{item.tasType}}</text>
				</view>
				<text class="iconfont icon-jiantou"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import { homeModule } from '../../../modules/home.js'
	import util from '../../../utils/util.js'
	
	const home = new homeModule()
	 
	export default {
		data() {
			return {
				guides: []
			};
		},
		onLoad() {
			let neiID = util.getStorage('neiID')
			home.getTasType(neiID).then((guides)=>{
				this.guides = guides
			})
		},
		methods:{
			onGuideDetail(tasType) {
				uni.navigateTo({
					url: `/pages/home/guideDetails/guideDetails?tasType=${tasType}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../common/scss/common.scss";
	@import "../../../common/scss/iconfont.css";
	page{
		background-color: #F7F7F7;
	}
	.title {
		font-size: ws(20);
		padding: ws(15);
	}

	.list {
		padding: 0 ws(15);
		background-color: #FFFFFF;
		
		.item {

			padding: ws(20) 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1upx solid #eee;

			.item-type {
				display: flex;
				align-items: center;
				color: #222;
				font-size: ws(16);

				.icon {
					width: ws(10);
					height: ws(10);
					margin-right: ws(8);
					border-radius: ws(16);
					border: 10upx solid rgba(#2A83FF,.7);
				}
			}

		}
	}
</style>
